<template>
	<div v-if="typeof contactInfoData === 'object' && Object.keys(contactInfoData).length"
		:class="['tui-contact-info', !isPC && 'tui-contact-info-h5']">
		<div v-if="!isPC" :class="[
        'tui-contact-info-header',
        !isPC && 'tui-contact-info-h5-header',
      ]">
			<div :class="[
          'tui-contact-info-header-icon',
          !isPC && 'tui-contact-info-h5-header-icon',
        ]" @click="resetContactSearchingUIData">
				<Icon :file="backSVG" />
			</div>
			<div :class="[
          'tui-contact-info-header-title',
          !isPC && 'tui-contact-info-h5-header-title',
        ]">
				{{ TUITranslateService.t("TUIContact.添加好友/群聊") }}
			</div>
		</div>
		<div :class="['tui-contact-info-basic', !isPC && 'tui-contact-info-h5-basic']">
			<div :class="[
          'tui-contact-info-basic-text',
          !isPC && 'tui-contact-info-h5-basic-text',
        ]">
				<div :class="[
            'tui-contact-info-basic-text-name',
            !isPC && 'tui-contact-info-h5-basic-text-name',
          ]">
					{{ generateContactInfoName(contactInfoData) }}
				</div>
				<div v-for="item in contactInfoBasicList" :key="item.label" :class="[
            'tui-contact-info-basic-text-other',
            !isPC && 'tui-contact-info-h5-basic-text-other',
          ]">
					{{
            `${TUITranslateService.t(`TUIContact.${item.label}`)}:
          ${item.data}`
          }}
				</div>
			</div>
			<img :class="[
          'tui-contact-info-basic-avatar',
          !isPC && 'tui-contact-info-h5-basic-avatar',
        ]" :src="generateAvatar(contactInfoData)">
		</div>
		<div v-if="contactInfoMoreList[0]" :class="['tui-contact-info-more', !isPC && 'tui-contact-info-h5-more']">
			<div v-for="item in contactInfoMoreList" :key="item.key" :class="[
          'tui-contact-info-more-item',
          !isPC && 'tui-contact-info-h5-more-item',
          item.labelPosition === CONTACT_INFO_LABEL_POSITION.TOP
            ? 'tui-contact-info-more-item-top'
            : 'tui-contact-info-more-item-left',
        ]">
				<div :class="[
            'tui-contact-info-more-item-label',
            !isPC && 'tui-contact-info-h5-more-item-label',
          ]">
					{{ `${TUITranslateService.t(`TUIContact.${item.label}`)}` }}
				</div>
				<div :class="[
            'tui-contact-info-more-item-content',
            !isPC && 'tui-contact-info-h5-more-item-content',
          ]">
					<div v-if="!item.editing" :class="[
              'tui-contact-info-more-item-content-text',
              !isPC && 'tui-contact-info-h5-more-item-content-text',
            ]">
						<div :class="[
                'tui-contact-info-more-item-content-text-data',
                !isPC && 'tui-contact-info-h5-more-item-content-text-data',
              ]">
							{{ item.data }}
						</div>
						<div v-if="item.editable" :class="[
                'tui-contact-info-more-item-content-text-icon',
                !isPC && 'tui-contact-info-h5-more-item-content-text-icon',
              ]" @click="setEditing(item)">
							<Icon :file="editSVG" width="14px" height="14px" />
						</div>
					</div>
					<input v-else-if="item.editType === CONTACT_INFO_MORE_EDIT_TYPE.INPUT" v-model="item.data" :class="[
              'tui-contact-info-more-item-content-input',
              !isPC && 'tui-contact-info-h5-more-item-content-input',
            ]" type="text" @confirm="onContactInfoEmitSubmit(item)" @keyup.enter="onContactInfoEmitSubmit(item)">
					<textarea v-else-if="item.editType === CONTACT_INFO_MORE_EDIT_TYPE.TEXTAREA" v-model="item.data"
						:class="[
              'tui-contact-info-more-item-content-textarea',
              !isPC && 'tui-contact-info-h5-more-item-content-textarea',
            ]" confirm-type="done" />
					<div v-else-if="item.editType === CONTACT_INFO_MORE_EDIT_TYPE.SWITCH"
						@click="onContactInfoEmitSubmit(item)">
						<SwitchBar :value="item.data" />
					</div>

					<div v-else-if="item.editType === CONTACT_INFO_MORE_EDIT_TYPE.FRIENDCIRCLE"
						@click="updateFriendCirclePermission()">
						<SwitchBar :value="FriendCirclePermission" />
					</div>
					<!-- <div v-else-if="item.editType === CONTACT_INFO_MORE_EDIT_TYPE.FRIENDQ">
						<div>朋友圈</div>
					</div> -->
				</div>
			</div>
		</div>
		<div v-if="contactInfoMoreList[0]" :class="['tui-contact-info-button',!isPC && 'tui-contact-info-h5-button']">
			<div style="color: #006eff;width:90%;"
				:class="['tui-contact-info-button-item',!isPC && 'tui-contact-info-h5-button-item']"
				@click="onFriendQClicked()">
				朋友圈
			</div>
		</div>






		<div :class="[
        'tui-contact-info-button',
        !isPC && 'tui-contact-info-h5-button',
      ]">
			<button v-for="item in contactInfoButtonList" :key="item.key" :class="[
          'tui-contact-info-button-item',
          !isPC && 'tui-contact-info-h5-button-item',
          item.type === CONTACT_INFO_BUTTON_TYPE.CANCEL
            ? `tui-contact-info-button-item-cancel`
            : `tui-contact-info-button-item-submit`,
        ]" @click="onContactInfoButtonClicked(item)">
				{{ TUITranslateService.t(`TUIContact.${item.label}`) }}
			</button>
			<div style="color: #e54545;width:90%;" :class="[
	      'tui-contact-info-button-item',
	      !isPC && 'tui-contact-info-h5-button-item',
	    ]" @click="onContactReportion()">
				举报
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
	import TUIChatEngine, {
		TUIStore,
		StoreName,
		TUITranslateService,
		IGroupModel,
		Friend,
		FriendApplication,
	} from '@tencentcloud/chat-uikit-engine';
	import { TUIGlobal } from '@tencentcloud/universal-api';
	import { ref, computed, onMounted, onUnmounted } from '../../../adapter-vue';
	import { isPC } from '../../../utils/env';
	import {
		generateAvatar,
		generateContactInfoName,
		generateContactInfoBasic,
		isFriend,
		isApplicationType,
	} from '../utils/index';
	import {
		contactMoreInfoConfig,
		contactButtonConfig,
	} from './contact-info-config';
	import Icon from '../../common/Icon.vue';
	import editSVG from '../../../assets/icon/edit.svg';
	import backSVG from '../../../assets/icon/back.svg';
	import SwitchBar from '../../common/SwitchBar/index.vue';
	import {
		IBlackListUserItem,
		IContactInfoMoreItem,
		IContactInfoButton,
	} from '../../../interface';
	import {
		CONTACT_INFO_LABEL_POSITION,
		CONTACT_INFO_MORE_EDIT_TYPE,
		CONTACT_INFO_BUTTON_TYPE,
	} from '../../../constant';
	import { deepCopy } from '../../TUIChat/utils/utils';
	import { Toast } from '../../common/Toast/index';
	import useRequest from '@/utils/requestim';
	type IContactInfoType = IGroupModel | Friend | FriendApplication | IBlackListUserItem;

	const emits = defineEmits(['switchConversation']);

	const contactInfoData = ref<IContactInfoType>({} as IContactInfoType);
	const contactInfoBasicList = ref<Array<{ label : string; data : string }>>([]);
	const contactInfoMoreList = ref<IContactInfoMoreItem[]>([]);
	const contactInfoButtonList = ref<IContactInfoButton[]>([]);

	const setEditing = (item : any) => {
		item.editing = true;
	};

	const isGroup = computed(() : boolean =>
		(contactInfoData.value as IGroupModel)?.groupID ? true : false,
	);

	const isApplication = computed(() : boolean => {
		return isApplicationType(contactInfoData?.value);
	});

	// is both friend, if is group type always false
	const isBothFriend = ref<boolean>(false);

	// is group member, including ordinary member, admin, group owner
	const isGroupMember = computed(() : boolean => {
		return (contactInfoData.value as IGroupModel)?.selfInfo?.userID ? true : false;
	});

	// is in black list, if is group type always false
	const isInBlackList = computed(() : boolean => {
		return (
			!isGroup.value
			&& blackList.value?.findIndex(
				(item : IBlackListUserItem) =>
					item?.userID === (contactInfoData.value as IBlackListUserItem)?.userID,
			) >= 0
		);
	});

	const blackList = ref<IBlackListUserItem[]>([]);

	onMounted(() => {
		TUIStore.watch(StoreName.CUSTOM, {
			currentContactInfo: onCurrentContactInfoUpdated,
		});
		TUIStore.watch(StoreName.USER, {
			userBlacklist: onUserBlacklistUpdated,
		});
		getFriendCirclePermission()
	});

	onUnmounted(() => {
		TUIStore.unwatch(StoreName.CUSTOM, {
			currentContactInfo: onCurrentContactInfoUpdated,
		});
		TUIStore.unwatch(StoreName.USER, {
			userBlacklist: onUserBlacklistUpdated,
		});
	});

	const resetContactInfoUIData = () => {
		contactInfoData.value = {} as IContactInfoType;
		contactInfoBasicList.value = [];
		contactInfoMoreList.value = [];
		contactInfoButtonList.value = [];
	};

	const resetContactSearchingUIData = () => {
		TUIStore.update(StoreName.CUSTOM, 'currentContactInfo', {});
		TUIStore.update(StoreName.CUSTOM, 'currentContactSearchingStatus', false);
		TUIGlobal?.closeSearching && TUIGlobal?.closeSearching();
	};

	const onContactInfoEmitSubmit = (item : any) => {
		item.editSubmitHandler
			&& item.editSubmitHandler({
				item,
				contactInfoData: contactInfoData.value,
				isBothFriend: isBothFriend.value,
				isInBlackList: isInBlackList.value,
			});
	};

	const onContactInfoButtonClicked = (item : any) => {
		item.onClick
			&& item.onClick({
				contactInfoData: contactInfoData.value,
				contactInfoMoreList: contactInfoMoreList.value,
			});
		if (
			item.key === 'enterGroupConversation'
			|| item.key === 'enterC2CConversation'
		) {
			emits('switchConversation', contactInfoData.value);
			resetContactSearchingUIData();
		}
	};
	const onContactReportion = () => {
		TUIGlobal?.navigateTo({
			url: `/pages/setting/report`,
		});
	}

	//朋友圈权限
	const FriendCirclePermission = ref<boolean>(false);

	async function getFriendCirclePermission() {
		if (contactInfoData.value.userID) {
			try {
				const response = await useRequest({
					url: '/tencentImUserFriend/getFriendCirclePermission',
					header: {
						'token': uni.getStorageSync('ACCESS_TOKEN')
					},
					method: 'get',
					data: {
						friendId: contactInfoData.value.userID
					},
				});
				console.log('！朋友圈权限', response.data.data.isFriendCircle)
				FriendCirclePermission.value = response.data.data.isFriendCircle

			} catch (error) {
				console.error('Error:', error);
			}
		}
	}
	//更新朋友圈权限
	async function updateFriendCirclePermission() {
		const user_info = uni.getStorageSync('user_info') || {}
		try {
			const response = await useRequest({
				url: '/tencentImUserFriend/updateFriendCirclePermission',
				header: {
					'token': uni.getStorageSync('ACCESS_TOKEN')
				},
				method: 'post',
				data: {
					friendId: contactInfoData.value.userID,
					permission: !FriendCirclePermission.value,
					userId: user_info.id
				},
			});

			if (response.data.status == 200) {
				FriendCirclePermission.value = !FriendCirclePermission.value
				Toast({
					message: '操作成功',
				});
			} else {
				Toast({
					message: response.data.msg,
				});
			}

		} catch (error) {
			console.error('Error:', error);
		}
	}


	//朋友圈
	const onFriendQClicked = () => {
		TUIGlobal?.navigateTo({
			url: `/pages/friend/frienduser?userID=${contactInfoData.value.userID}`,
		});
	}

	const generateMoreInfo = async () => {
		if (!isApplication.value) {
			if (
				(!isGroup.value && !isBothFriend.value && !isInBlackList.value)
				|| (isGroup.value
					&& !isGroupMember.value
					&& (contactInfoData.value as IGroupModel)?.type !== TUIChatEngine?.TYPES?.GRP_AVCHATROOM)
			) {
				contactMoreInfoConfig.setWords.data = '';
				contactInfoMoreList.value.push(contactMoreInfoConfig.setWords);
			}
			if (!isGroup.value && !isInBlackList.value) {
				contactMoreInfoConfig.setRemark.data
					= (contactInfoData.value as Friend)?.remark || '';
				contactMoreInfoConfig.setRemark.editing = false;
				contactInfoMoreList.value.push(contactMoreInfoConfig.setRemark);
			}
			if (!isGroup.value && (isBothFriend.value || isInBlackList.value)) {
				contactMoreInfoConfig.blackList.data = isInBlackList.value || false;
				contactInfoMoreList.value.push(contactMoreInfoConfig.blackList);
			}

			//朋友圈

			if (!isGroup.value && (isBothFriend.value || isInBlackList.value)) {
				contactMoreInfoConfig.getFriendCirclePermissionList.data = isInBlackList.value || false;
				contactInfoMoreList.value.push(contactMoreInfoConfig.getFriendCirclePermissionList);
			}

		} else {
			contactMoreInfoConfig.displayWords.data
				= (contactInfoData.value as FriendApplication)?.wording || '';
			contactInfoMoreList.value.push(contactMoreInfoConfig.displayWords);
		}
	};

	const generateButton = () => {
		if (isInBlackList.value) {
			return;
		}
		if (isApplication.value) {
			if (
				(contactInfoData.value as FriendApplication)?.type
				=== TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME
			) {
				contactInfoButtonList?.value?.push(
					contactButtonConfig.refuseFriendApplication,
				);
				contactInfoButtonList?.value?.push(
					contactButtonConfig.acceptFriendApplication,
				);
			}
		} else {
			if (isGroup.value && isGroupMember.value) {
				switch ((contactInfoData.value as IGroupModel)?.selfInfo?.role) {
					case 'Owner':
						contactInfoButtonList?.value?.push(contactButtonConfig.dismissGroup);
						break;
					default:
						contactInfoButtonList?.value?.push(contactButtonConfig.quitGroup);
						break;
				}
				contactInfoButtonList?.value?.push(
					contactButtonConfig.enterGroupConversation,
				);
			} else if (!isGroup.value && isBothFriend.value) {
				contactInfoButtonList?.value?.push(contactButtonConfig.deleteFriend);
				contactInfoButtonList?.value?.push(
					contactButtonConfig.enterC2CConversation,
				);
			} else {
				if (isGroup.value) {
					contactInfoButtonList?.value?.push(
						(contactInfoData.value as IGroupModel)?.type === TUIChatEngine?.TYPES?.GRP_AVCHATROOM
							? contactButtonConfig.joinAVChatGroup
							: contactButtonConfig.joinGroup,
					);
				} else {
					contactInfoButtonList?.value?.push(contactButtonConfig.addFriend);
				}
			}
		}
	};
	function onUserBlacklistUpdated(userBlacklist : IBlackListUserItem[]) {
		blackList.value = userBlacklist;
	}

	async function onCurrentContactInfoUpdated(contactInfo : IContactInfoType) {
		if (
			contactInfoData.value
			&& contactInfo
			&& JSON.stringify(contactInfoData.value) === JSON.stringify(contactInfo)
		) {
			return;
		}
		resetContactInfoUIData();
		// deep clone
		contactInfoData.value = deepCopy(contactInfo) || {};
		if (!contactInfoData.value || Object.keys(contactInfoData.value)?.length === 0) {
			return;
		}
		contactInfoBasicList.value = generateContactInfoBasic(
			contactInfoData.value,
		);
		isBothFriend.value = await isFriend(contactInfoData.value);
		generateMoreInfo();
		generateButton();
		if (contactInfo.infoKeyList) {
			contactInfoMoreList.value = contactInfo.infoKeyList.map((key : string) => {
				return (contactMoreInfoConfig as any)[key];
			});
		}
		if (contactInfo.btnKeyList) {
			contactInfoButtonList.value = contactInfo.btnKeyList.map((key : string) => {
				return (contactButtonConfig as any)[key];
			});
		}
	}
</script>
<style lang="scss" scoped src="./style/index.scss"></style>